<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.2.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@keyframes  myfirst{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(3210deg);
				}
			}
			.aaa{
				width: 100px;
				height: 100px;
				background: #ccc;
				transform: rotate(0deg);
				animation: myfirst 4s ease 1s;
				animation-play-state: paused;
			}
			.bbb{
				width: 100px;
				height: 100px;
				background: #ccc;
				transform: rotate(0deg);
			}
		</style>
	</head>
	<body>
		<div class="aaa">
			aaa
		</div>
		<div class="bbb">
			bbb
		</div>
		<button type="button" onclick="start()">开始</button>
		<button type="button" onclick="end()">结束</button>
	</body>
</html>
<script type="text/javascript">
	var aaa = document.getElementsByClassName('aaa')
	function start(){
		console.log(1111);
		aaa[0].style.animationPlayState = 'running'
	}
	function end(){
		console.log(2222);
		aaa[0].style.animationPlayState = 'paused'
		setTimeout(function() {
			let st = window.getComputedStyle(aaa[0], null)
			let tr = st.getPropertyValue("-webkit-transform") ||
				st.getPropertyValue("-moz-transform") ||
				st.getPropertyValue("-ms-transform") ||
				st.getPropertyValue("-o-transform") ||
				st.getPropertyValue("transform") ||
				"FAIL";
				
			console.log('Matrix: ' + tr);
			// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
			var values = tr.split('(')[1].split(')')[0].split(',');
			var a = values[0];
			var b = values[1];
			var c = values[2];
			var d = values[3];
			var scale = Math.sqrt(a * a + b * b);
			console.log('Scale: ' + scale);
			// arc sin, convert from radians to degrees, round
			var sin = b / scale;
			// next line works for 30deg but not 130deg (returns 50);
			// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
			var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
			console.log('Rotate: ' + angle + 'deg');
		}, 1000);
	}
</script>